<template>
  <el-dialog
    class="customD"
    title=""
    :visible="codeEmailDialog"
    :show-close="false"
    :close-on-click-modal="false"
    width="449px"
  >
    <div class="title">需要验证您的身份</div>
    <div class="explain">
      将发送验证码至您的<span style="color: #03bfc6">{{
        this.email ? this.email : ""
      }}</span
      >邮箱
    </div>
    <div class="codeBox">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item prop="code">
          <el-input
            v-model="ruleForm.code"
            placeholder="输入6位邮箱验证码"
            style="width: 225px"
          ></el-input>
          <el-button class="codeBtn" @click="getCode" style="width: 133px">{{
            codeText
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" style="width: 120px">取消</el-button>
      <el-button
        type="primary"
        style="width: 120px"
        @click="handleSubmit('ruleForm')"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { getUserInfo } from "@/utils/public";
export default {
  props: ["codeEmailDialog", "type", "codeId"],
  data() {
    return {
      setTime: null,
      email: getUserInfo().username ? getUserInfo().username : "",
      codeText: "获取邮箱验证码",
      ruleForm: {},
      rules: {
        code: [
          { required: true, message: "邮箱验证码不能为空", trigger: "change" },
          {
            min: 6,
            max: 6,
            message: "请输入正确的6位数验证码",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    getUserInfo,
    getCode() {
      if (this.codeText == "获取邮箱验证码") {
        // var params = new FormData();
        // params.append("verificationCodeEnum", this.type);
        let params = {
          verificationCodeEnum: this.type
        };
        this.$http
          .post("/email/sendEmailVerificationCode", params)
          .then((res) => {
            if (res.code === "0000") {
              var time = 60;
              this.codeText = time + "s 重新发送";
              this.setTime = setInterval(() => {
                time = time - 1;
                this.codeText = time + "s 重新发送";
                if (time == 0) {
                  clearInterval(this.setTime);
                  this.codeText = "获取邮箱验证码";
                }
              }, 1000);
              //console.log(res.data);
            }
          });
      }
    },
    handleClose() {
      this.ruleForm = {};
      this.$refs["ruleForm"].resetFields();
      clearInterval(this.setTime);
      this.codeText = "获取短信验证码";
      this.$emit("update:codeEmailDialog", false);
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // var params = new FormData();
          // params.append("emailCode", this.ruleForm.code);
          // params.append("verificationCodeEnum", this.type);
          let params = {
            emailCode: this.ruleForm.code,
            verificationCodeEnum: this.type
          };
          this.$http
            .post("/email/verificationEmailCode", params)
            .then((res) => {
              if (res.code === "0000") {
                this.$emit("codeEmailState", this.ruleForm.code);
                clearInterval(this.setTime);
                this.codeText = "获取短信验证码";
                this.ruleForm = {};
                this.$refs["ruleForm"].resetFields();
                this.$emit("update:codeEmailDialog", false);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.customD {
  .title {
    width: 160px;
    height: 24px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
  .explain {
    margin-top: 45px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
  .codeBox {
    margin-top: 10px;
  }
  .codeBtn {
    width: 133px;
    height: 32px;
    background: #25b5d9;
    color: #fff;
    margin-left: 10px;
    border-radius: 2px;
    text-align: center;
    border: none;
  }
  :deep(.el-dialog) {
    background: transparent;
    box-shadow: none;
  }
  :deep(.el-dialog__body) {
    height: 336px;
    padding: 41px 40px;
    padding-bottom: 48px;
    background: #fff;
    border-radius: 16px;
    margin-bottom: -82px;
  }
  :deep(.dialog-footer) {
    margin-right: 22px;
  }
}
</style>
